<template>
  <div>
    <el-option
      :key="item[keyName]"
      :label="item[labelName]"
      :value="valueType==='object'? item : item[keyName]" >
      <el-tooltip v-if="openToolTip" :open-delay="800" placement="right">
        <div slot="content" style="max-width: 200px;">{{ item[labelName] }}</div>
        <div class="ellipsisOne">{{ item[labelName] }}</div>
      </el-tooltip>
      <div v-else class="ellipsisOne">{{ item[labelName] }}</div>
    </el-option>
  </div>
</template>

<script>
export default {
  model: {
    prop: 'item',
    event: 'change'
  },
  props: {
    item: {
      type: Object,
      default: () => {
        return {};
      }
    },
    valueType: { // 如果值为object,则值使用对象传输
      type: String,
      default: 'object'
    },
    labelName: { // label的字段
      type: String,
      default: 'userName'
    },
    keyName: { // key的字段
      type: String,
      default: 'id'
    },
    openToolTip: { // 是否展示列表的tooltip
      type: Boolean,
      default: false
    }
  },
  methods: {
  }
};
</script>

<style scoped lang="scss">
</style>
